<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>home</title>
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.5.4/css/layui.css}" media="all">
    <script>
        const PATH = "[[${#httpServletRequest.getContextPath()}]]";
    </script>

    <!-- 避免Thymeleaf异常 -->
    <script type="text/javascript" th:inline="javascript"></script>
    <style>
        .layui-bg-black {
            background: #D3DAE6 !important;
        }

        .dKgByc {
            line-height: 1.5;
            padding: 2px 0;
            font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace;
            font-size: 14px;
        }

        table {
            width: 100%;
            line-height: 0.5;
        }

        td {
            width: 50%;
        }
    </style>
</head>
<body id="iosiframe">

<div id='head_div'>
    <div class="layui-form layui-form-pane" action="" onsubmit="return false">

        <hr class="layui-bg-black">
        <p style="line-height:26px;">
            <span class='layui-badge layui-bg-cyan' id="span_name"></span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span class='layui-badge layui-bg-cyan' id="service_name"></span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span class='layui-badge layui-bg-cyan' id="transaction_name"></span><br>
            <span class='layui-badge layui-bg-cyan' id="time"></span>
            <span class='layui-badge layui-bg-cyan' id="duration"></span>
            <span class='layui-badge layui-bg-cyan' id="addr"></span>
            <span class='layui-badge layui-bg-cyan' id="status"></span>
            <span class='layui-badge layui-bg-cyan' id="type"></span>
            <span class='layui-badge layui-bg-cyan' id="subType"></span>
        </p>
        <hr class="layui-bg-black">

        <div class="layui-tab layui-tab-brief" lay-filter="demo">
            <ul class="layui-tab-title">
                <li class="layui-this" style="font-weight: bold">Stack Trace</li>
                <li style="font-weight: bold">Metadata</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show" id="stackTrace"></div>
                <div class="layui-tab-item" id="metadata">
                    <div class="layui-form-item">

                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Trace</legend>
                        </fieldset>

                        <hr class="layui-bg-black">
                        <table>
                            <tr>
                                <td style="padding-left: 30px;font-weight: bold;">trace.id</td>
                                <td id="traceId"></td>
                            </tr>
                        </table>
                        <hr class="layui-bg-black">

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Transaction</legend>
                        </fieldset>

                        <hr class="layui-bg-black">
                        <table>
                            <tr>
                                <td style="padding-left: 30px;font-weight: bold;">transaction.id</td>
                                <td id="transactionId"></td>
                            </tr>
                        </table>
                        <hr class="layui-bg-black">

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Span</legend>
                        </fieldset>

                        <hr class="layui-bg-black">
                        <table>
                            <tr>
                                <td style="padding-left: 30px;font-weight: bold;">span.id</td>
                                <td id="spanId"></td>
                            </tr>
                        </table>
                        <hr class="layui-bg-black">

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Service</legend>
                        </fieldset>

                        <hr class="layui-bg-black">
                        <table>
                            <tr>
                                <td style="padding-left: 30px;font-weight: bold;">service.name</td>
                                <td id="serviceName"></td>
                            </tr>
                        </table>
                        <hr class="layui-bg-black">

                        <br>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>Agent</legend>
                        </fieldset>

                        <hr class="layui-bg-black">
                        <table>
                            <tr>
                                <td style="padding-left: 30px;font-weight: bold;">agent.ephemeral_id</td>
                                <td id="agentEphemeralId"></td>
                            </tr>
                        </table>
                        <hr class="layui-bg-black">
                        <table>
                            <tr>
                                <td style="padding-left: 30px;font-weight: bold;">agent.name</td>
                                <td id="agentName"></td>
                            </tr>
                        </table>
                        <hr class="layui-bg-black">
                        <table>
                            <tr>
                                <td style="padding-left: 30px;font-weight: bold;">agent.version</td>
                                <td id="agentVersion"></td>
                            </tr>
                        </table>
                        <hr class="layui-bg-black">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!--<div id='body_div'>
</div>-->

<script src="/static/layui/layui.all.js" th:src="@{/static/lib/layui-v2.5.4/layui.all.js}"></script>
<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
<script>
    let form, layer, element;
    layui.use(['layer', 'form', 'element'], function () {
        form = layui.form, layer = layui.layer, element = layui.element;
    });

    $(function () {
        let data = sessionStorage.getItem("param");
        sessionStorage.removeItem("param");
        data = JSON.parse(data);

        let data2 = data.data;
        $("#span_name").html(data2.span.name);
        $("#service_name").html(data2.service.name);
        if (data.transactionName === undefined || data.transactionName === '') {
            $("#transaction_name").hide();
        } else {
            $("#transaction_name").html(data.transactionName);
        }
        $("#time").html(data.time);
        $("#duration").html(data.duration);

        if (data2.span.http === undefined) {
            $("#addr").hide();
            $("#status").hide();
            $("#addr").hide();
        } else {
            $("#addr").html(data2.span.http.method + ' ' + data2.span.http.url.original);
            $("#status").html(data2.span.http.response.status_code);
        }
        $("#type").html(data2.span.type);
        $("#subType").html(data2.span.subtype);
        if (data2.span.type === undefined) {
            $("#type").hide();
        }
        if (data2.span.subtype === undefined) {
            $("#subType").hide();
        }

        let stStr = "";
        let stacktrace = data2.span.stacktrace;
        if (stacktrace != null && stacktrace.length > 0) {
            for (let i in stacktrace) {
                if (stacktrace.hasOwnProperty(i)) {
                    stStr = stStr + "<p class='dKgByc'>" +
                        "<span style='color:grey;'>at </span>"
                        + stacktrace[i]['classname']
                        + "." + stacktrace[i]['function']
                        + "(" + stacktrace[i]['filename'] + ":"
                        + stacktrace[i]['line']['number']
                        + ")"
                        + "</p>";
                }
            }
            $("#stackTrace").html(stStr);
        } else {
            $("#stackTrace").html("<p style='font-weight: bold;font-size: 18px;'>No stack trace available.</p>");
        }

        $("#traceId").html(data2.trace.id);
        $("#transactionId").html(data2.transaction.id);
        $("#spanId").html(data2.span.id);
        $("#serviceName").html(data2.service.name);
        $("#agentEphemeralId").html(data2.agent.ephemeral_id);
        $("#agentName").html(data2.agent.name);
        $("#agentVersion").html(data2.agent.version);

    })
</script>
<script type="text/javascript" th:inline="none">
    function init() {
        let ua = navigator.userAgent.toLowerCase();
        let screenWidth = window.screen.width;
        if (!/iphone|ipad|ipod/.test(ua)) {
            $("#iosiframe").attr("scrolling", "auto");
        } else {
            $('#iosiframe').width(screenWidth + 'px');
        }

        $("body").css({
            "height": $(window).height() - 15
        });
        $("#body_div").css({
            "height": $("body").height() - $("#head_div").height() - 10
        });
        tableHeight = $("#body_div").height() - 15;
    }

    $(window).resize(function () {
        init();
    });
</script>
</body>
</html>
